<template>
    <div id='box' v-if='dataList'>
        <detail-header v-scroll='50'>{{dataList.name}}</detail-header>
        <div :style="{backgroundImage: 'url('+dataList.poster+')'}" class='poster'></div>
        <div id='content'>
            <div class='title'>
                <div class="left">{{dataList.name}}</div>
                <div class="right">
                    <span style="font-size:18px;color:#ffb232">{{dataList.grade}}</span>
                    <span style="font-size:10px;color:#ffb232">分</span>
                </div>
            </div>
            <div class='information'>
                <div>{{dataList.category}}</div>
                <div>{{dataList.premiereAt | premiereAtFilter}}上映</div>
                <div><span>{{dataList.nation}}</span> | <span>{{dataList.runtime}}</span> 分钟</div>
                <div :class='isHidden?"introduce":""' style="line-height:18px;margin-top:12px">{{dataList.synopsis}}</div>
                <div class='icon'>
                    <i class='iconfont' :class='isHidden?"icon-xiala":"icon-xiangshang"' @click="isHidden=!isHidden"></i>
                </div>
            </div>
        </div>
        <div class='axtors-title'>演职人员</div>
        <div class='scoll-list'>
            <!-- <ul :style="{'width':dataList.actors.length*95+'px'}">
                <li v-for='(item,index) in dataList.actors' :key='index'>
                    <div class='target_img' :style="{backgroundImage:'url('+item.avatarAddress+')'}">
                    </div>
                    <span class='target_name'>{{item.name}}</span>
                    <span class='target_name'>{{item.role}}</span>
                </li>
            </ul> -->
            <detail-swiper name='actors_view' class='scroll_box'>
                <detail-swiper-item v-for='(item,index) in dataList.actors' :key='index'>
                    <div class='target_img' :style="{backgroundImage:'url('+item.avatarAddress+')'}"></div>
                    <span class='target_name'>{{item.name}}</span>
                    <span class='target_name'>{{item.role}}</span>
                </detail-swiper-item>
            </detail-swiper>
        </div>
        <div class='photos_title'>
            <span style="font-size:16px">剧照</span>
            <span class='allImage'>全部(<span>{{dataList.photos ? dataList.photos.length : 0}}</span>)&gt;</span>
        </div>
        <div class='items_img'>
            <detail-swiper :preview='2.1' name='img_view' class='img_box'>
                <detail-swiper-item class='ctr' v-for='(item,index) in dataList.photos' :key="index">
                    <img :src="item" @click='handlePreview(dataList.photos,index)'>
                </detail-swiper-item>
            </detail-swiper>
        </div>
    </div>
</template>
<script>
import http from '@/util/http'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/components/detail/DetailSwiper'
import DetailHeader from '@/components/detail/DetailHeader'
import DetailSwiperItem from '@/components/detail/DetailSwiperItem'
import { ImagePreview } from 'vant'
import 'vant/lib/index.css'
import mixins from '@/util/mixins'

Vue.directive('scroll', {
  inserted (el, binding) {
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  unbind () {
    window.onscroll = null
  }
})

Vue.filter('premiereAtFilter', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})
moment.locales('zh-cn')
export default {
  mixins: [mixins],
  components: {
    detailSwiper,
    DetailSwiperItem,
    DetailHeader
  },
  data () {
    return {
      dataList: null,
      backgroundImage: 'background',
      isHidden: true
    }
  },
  methods: {
    handlePreview (img, index) {
      ImagePreview({
        images: img,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  },
  created () {
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=891498`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.dataList = res.data.data.film
    })
  }
}
</script>
<style lang="scss" scoped>
#box{
    width: 100%;
    margin-bottom: 10px;
    overflow: hidden;

    .poster{
        width: 100%;
        height: 13.125rem;
        background-size: cover;
        background-position: center center;
        background-repeat:no-repeat;
    }
    #content{
        width: calc(100% - 30px);
        padding: 12px 15px 15px;
        background: rgb(255, 255, 255);
        .title{
            width: 100%;
            overflow: hidden;
            .left{
                float: left;
                text-align: left;
                font-size: 18px;
            }
            .right{
                float: right;
                text-align: right;
                font-style:oblique;
            }
        }
        .information{
            width: 100%;
            font-size: 13px;
            margin-top: 5px;
            color:gray;
            div{
                margin-top: 5px;
            }
            .introduce{
                height:36px;
                line-height:18px;
                overflow: hidden;
            }
            .icon{
                text-align: center;
            }
        }
    }
    .axtors-title{
        padding:15px;
        font-size: 16px;
        margin-top:10px;
        background:white
    }
    .scoll-list{
        width: 100%;
        overflow: scroll;
        background: white;
        .scroll_box{
            padding:0 15px 15px 15px;
            .target_img{
                width: 85px;
                height:85px;
                background-size: cover;
                background-position: center center;
                margin-bottom:10px;
                margin:0 auto;
            }
            .target_name{
                display: block;
                width: 100%;
                text-align: center;
                font-size: 12px;
            }
            .target_name:last-child{
                font-size: 10px;
                color:gray;
            }
        }
    }
    .photos_title{
        padding:15px;
        background: white;
        margin-top:10px;
        overflow: hidden;
        >span:first-child{
            float: left;
        }
        >span:last-child{
            float: right;
            display: block;
            font-size: 13px;
            color:gray;
            text-align: right;
        }
    }
    .items_img{
        width: 100%;
        height: 100px;
        background: white;
        padding-bottom:15px;

        .img_box{
            height: 100px;
            padding:0 15px;
            .ctr{
                height: 100px;
                display: flex;
                align-items: center;
                img{
                    width: 150px;
                }
            }
        }
    }
}
</style>
